import { Input } from "antd";
import React, { useState } from "react";
import styles from "./index.module.less";

interface Props {
	username: string;
	onChange: (value: string) => void;
}

const UpdatePassword: React.FC<Props> = ({ username, onChange }) => {
	const [newPassword, setNewPassword] = useState("");

	const inputChange = (value: string) => {
		setNewPassword(value);
		onChange(value);
	};

	return (
		<div className={styles.root}>
			<div>
				<div className="text">账号</div>
				<Input disabled={true} value={username}></Input>
			</div>
			<div>
				<div className="text">密码</div>
				<Input placeholder="请输入新密码" value={newPassword} onChange={e => inputChange(e.target?.value)}></Input>
			</div>
		</div>
	);
};

export default UpdatePassword;
